<template>
  <div class="box">
    <el-form ref="refForm" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="表格名称" prop="templateName">
        <el-input v-model="form.templateName" />
      </el-form-item>
      <el-form-item label="表格说明" prop="remark">
        <el-input v-model="form.remark" type="textarea" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import * as Table from "@/libs/table";

const refForm = ref(null);

const form = reactive({
  templateName: "",
  remark: "",
});

const rules = reactive({
  templateName: [
    {
      required: true,
      message: "请输入表格名称！",
    },
  ],
});

const Ready = (callback) => {
  refForm.value.validate((vaild) => {
    if (vaild) {
      Object.assign(Table.entity, form);
      Table.SaveTable();
    }
    callback(vaild);
  });
};

defineExpose({
  Ready,
});
</script>

<style lang="scss" scoped>
.box {
  width: 800px;
}
</style>
